20230530 JS {basic} {types} {for in, for of} {spread} {destructuring}

JS DeepDive 4000줄이나 되는 복습용 총체

• 웹의 3 4대 요소

  • HTML
  • CSS
  • JS
  • WASM

• JS 삽입위치는 주로 head, body의 맨 끝 | 내부 스크립트는 <script> 태그 안에 코드가 있고 | 외부 스크립트는 <script src="____"></script> 로 링크함.

• 세미콜론 안 붙여도 돌아감. 근데 걍 붙여주는 에디터 있음.

• 엄격모드 | "use strict"를 사용하면 ES5부터 나오는 변경사항과의 충돌을 막을 수 있다.

  • class는 ES6때 나왔기 때문에 엄격모드가 기본이다.

• 변수 이름규칙 | $는 주로 도큐먼트 원소를 지칭할 때 prefix로 쓰고, _는 for문에서 안쓰는 변수일 때 단일 underscore로 사용.

• var, let, const | var: 함수레벨 스코프, shadowing 🙆 | let: 블록레벨 스코프, shadowing 🙅 | const : 블록레벨 스코프, shadowing 🙅, constant

• 연산자

  • ??: nullish 병합 연산자: 값이 없으면 그 뒤에 오는 값을 집어넣어.
  • typeof: 현업에서는 별도의 타입체크 함수를 만들어 쓴다는거. 왜냐면 별에별게 다 Object로 튀어나와서...
  • 관계 연산자 in: 키만 가지고 판단한다는거 주의

• Types

  • 원시타입, 참조타입

  • Number | toString, parseInt

    • Math
    • NaN
    • Infinity, -Infinity

  • String | length, indexOf, includes, slice, splice, split, substring, toLoserCase, toUpperCase, trim, replace, concat, repeat

  • Boolean | true, false

  • undefined타입의 유일한 값인 undefined

  • null을 오브젝트로 만든 건 실수였다고...

  • Array는 typeof로 확인해보면 오브젝트로 나온다...

    • forEach: 도큐먼트원소를 순회할 때 쓰지 말 것 => NodeList의 forEach이라서 호환성이 안 좋음 => ... 전개문법을 사용하여 Array로 변환 후 forEach할 것.
    • length, map, filter, push, pop, slice, reduce, join, indexOf, includes, find, every, some, fill, shift, unshift, reverse, sort
    • concat: [10].concat([10])
    • reduce를 사용하여 sum 구하기: [1,2,3,4,5].reduce((a,b) => a + b, 0)
    • sort는 디폴트로 lexicographical order이기 때문에 [1,11,2,22,3,33].sort((a, b) => a - b) 식으로 작성해야함.

  • Object

    • 객체 자체는 iterable하지 않다. 그러니까 파이썬처럼 of 문법을 사용하여 작성하는게 불가. in 문법을 사용하여 키값을 순회한다면 가능.

    myObject = {
      지역이름: "전국", // key : value(2개의 집합을 가리켜 객체 프로퍼티)
      확진자수: 24889,
      격리해제수: 23030,
      사망자수: 438,
      십만명당발생율: 48.0,
    };
    
    for (const k in myObject) {
      console.log(`(${k}: ${myObject[k]})`);
    }
    

  • Map: object

    • set, get, has, delete, size, keys, values, entries

  • Set: object

    • add, delete, has, size

• LOOPS

  • 구글 컨벤션에서는 for in 보다는 for of를 권고하고 있다.

• Functions

• Classes

  • 원래 클래스는 없었다. ES6 전까지는 생성자(constructor)만 있었다.
  • 상속은 자바와 똑같이 extends를 사용함.

• 예외처리

  • try - catch - finally 도 자바와 똑같

• 전개구문 (spread)

  function f(...x){
      return x;
  }
  
  f(1, 2, 3, 4, 5)
  

  let arr1 = [1, 2, 3, 4];
  let arr2 = [10, 20, 30, 40];
  let arr3 = [100, ...arr1, 200, ...arr2, 300]
  let arr4 = [100, arr1, 200, arr2, 300]
  console.log(arr3)
  Math.max(...arr3);
  let [a, b, c, ...d] = [10, 20, 30, 40, 50, 60, 70]
  

• 구조분해할당 (destructuring, unpacking)

  for (let [[i, j], k] of [[[1, 2], 2], [[1, 2], 4]]) {
      console.log(i, j);
  }
  

• Fetch

  • 비동기 네트워크 통신을 구현하기 위해 사용하는 Web API
  • fetch(<URL>).then(<callback_response>)
  • response.json(), response.text(), response.blob()
  • then then then... 구문을 사용하기 싫으면 fetch 앞에 await를 사용하면 response를 가져올 수 있다.

  async function printjson() {
    const response = await fetch(`http://test.api.weniv.co.kr/mall`);
    const json = await response.json();
  
    console.log(json);
  }
  printjson();
  

• DOM

  • Document Object Model API | DOM과 JS는 별개임.
  • document.getElementById